<template>
  <div>
    <!-- 
      需求：点击按钮自身隐藏，出现输入框并马上处于激活状态
      1、静态布局
      2、给按钮绑定点击事件，并声明处理函数
      3、利用v-if指令控制按钮和输入框的显示隐藏
      4、在事件处理函数中通过控制变量来控制输入框的显示，并让输入框自动获取焦点
     -->
    <h1>4、$nextTick的使用场景</h1>
    <button v-if="bool" @click="searchFn">点击搜索</button>
    <input ref="ipt" v-else type="text" placeholder="输入要搜索的关键词" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool: true,
    };
  },
  methods: {
    searchFn() {
      this.bool = false;
      // focus() ：表单元素方法，让表单元素自动获取焦点
      // this.$refs.ipt.focus()// 报错，因为dom更新是异步的，因此这里还获取不到输入框
      // 那么如果能获取到输入框呢？答：我们可以通过$nextTick的回调函数中获取更新后的DOM
      this.$nextTick(()=>{
        this.$refs.ipt.focus()
      })
    },
  },
};
</script>

<style>
</style>